<html>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Salève webcam - la table d'orientation</title>
<link rel="stylesheet" type="text/css" href="webcam.css" />
</header>
<body onload='loadedInit()'>
<script src='js/http.js'></script>
<script src='js/webcam.js'></script>
<script src='webcam_def.js'></script>

<script type="text/javascript" src="js/blueshoes/lib/LibCrossBrowser.js"></script>
<script type="text/javascript" src="js/blueshoes/lib/EventHandler.js"></script>
<script type="text/javascript"
	src="js/blueshoes/core/form/Bs_FormUtil.lib.js"></script>
<script type="text/javascript"
	src="js/blueshoes/core/gfx/Bs_ColorUtil.lib.js"></script>
<script type="text/javascript"
	src="js/blueshoes/components/slider/Bs_Slider.class.js"></script>



<script language='javascript'>
       pano.bannerWidth=pano.nbTiles*pano.bannerTileWidth;
       thumbnails.includes="";
       for(i=0; i<thumbnails.list.length; i++){
         if(i>0)
            thumbnails.includes+=",";
         thumbnails.includes+=thumbnails.list[i];
       }	
    
       var rightcolData=initData();
       var panoData=initData();
       var decoMinuteData=initData();
       var sliderDecoMinute;
       
       function loadedInit(){
         //labLastStamp=document.getElementById('lastStamp');
         //taDebug=document.getElementById('tadebug');
         //labLastStamp.innerHTML="n/a";
         setDefaultImage();

		 
		 setLayout();
		 showMain(defaultImageUrl);
		 initSliders();
		 setTimeout("refreshData({'include': '"+thumbnails.includes+"'}, updateImages, rightcolData )", 1000);
		 
		 setTimeout("refreshData({'recentthan':'0', 'action': 'panoramic', 'name':'pano', 'nothumbnail':'1', 'index':'"+pano.index+"', 'crop':'"+pano.imagemagick.crop+"', 'scale':'"+pano.imagemagick.scale+"'}, updatePano, panoData )", 2000);

		 setTimeout("refreshData({'recentthan':'0', 'action':'list', 'showlast': nbDecoMinutes,'nothumbnail':1, 'include':'Decollage_minute', 'timeslice':60}, updateDecoMinute, decoMinuteData )", 3000);
		 
       }
       
 	   function setLayout(){
		 var td=document.getElementById('thumbnailscol');
	     for(i=0; i<thumbnails.list.length; i++){
	         n=thumbnails.list[i];
		     td.innerHTML+="<img id='thumbnail_"+n+"' onmouseover='file2enlarged(rightcolData, \""+n+"\", 0)' onmouseout='hideEnlarged()'></img><br/>\n";
		 }
         var div=document.getElementById('panoscrollDiv');
	     for(i=0; i<pano.nbTiles; i++){
            div.innerHTML+="<div id='panoscrollSub"+i+"' style='position:absolute; left:0'><img id='panoscrollSub_image"+i+"'></img></div>";
         } 	   
         setVisibilityPanoscrollDiv(false);
 	   }
 	   
	   function showMain(url){
	      var mainImage=document.getElementById('mainImage');
	      mainImage.src=url;
	      document.getElementById('enlargedImage').style.visibility='hidden';
       }
       function hideEnlarged(){
	      document.getElementById('enlargedImage').style.visibility='hidden';
       }
	   function showEnlarged(url){
	      var image=document.getElementById('enlargedImage');
	      image.src=url;
	      document.getElementById('enlargedImage').style.visibility='visible';
       }
       
       function file2enlarged(rootData, label, i){
          showEnlarged(getFile(rootData, label, i, 3)['url']);
       }

	   function updateImages(){
	      for(i=0; i<thumbnails.list.length; i++){
	         n=thumbnails.list[i];
	         var img=document.getElementById('thumbnail_'+n);
             var f=getFile(rightcolData, n, 0, 3);
	         if(f!=null){
	            img.src=f['urlthumbnail'];
	         }
	      }
	   }
	   function updatePano(){
	      var img=document.getElementById('panobanner');
          var f=getFile(panoData, 'pano', 0, 1);
	      if(f!=null){
	         img.src=f['url'];
	      }
	     for(i=0; i<pano.nbTiles; i++){
	         var img=document.getElementById('panoscrollSub_image'+i);
             var f=getFile(panoData, 'pano-sub'+i, 0, 0);
	         if(f!=null){
	            img.src=f['url'];
	         }
	     }
	   }
	   
	   function updateDecoMinute(){
       }
	   
	   function setDefaultImage(){
	      var mainImage=document.getElementById('mainImage');
	      if(sliderDecoMinute!=null){
    	      sliderDecoMinute_value=0;
    	  }
	      mainImage.src=defaultImageUrl;
	      mainImage.alt='default';
	   }

       //
       // main image history slider
       //
	   
	   function initSliders(){
          sliderDecoMinute = new Bs_Slider();
  //           sliderDecoMinute.attachOnSlideStart(bsSliderStart);
          sliderDecoMinute.attachOnChange(sliderDecoMinuteChange);
  //           sliderDecoMinute.attachOnSlideEnd(bsSliderEnd);
          sliderDecoMinute.width         = 670;
          sliderDecoMinute.height        = 20;
          sliderDecoMinute.minVal        = 1;
          sliderDecoMinute.maxVal        = nbDecoMinutes;
          sliderDecoMinute.valueInterval = 1;
          sliderDecoMinute.arrowAmount   = 1;
          sliderDecoMinute.arrowKeepFiringTimeout = 500;
          sliderDecoMinute.valueDefault  = nbDecoMinutes;
          sliderDecoMinute.imgDir   = 'js/blueshoes/components/slider/img/';
          //sliderDecoMinute.setBackgroundImage('bob/background.gif', 'no-repeat');
          sliderDecoMinute.setSliderIcon('bob/slider.gif', 13, 18);
          sliderDecoMinute.setArrowIconLeft('img/arrowLeft.gif', 16, 16);
          sliderDecoMinute.setArrowIconRight('img/arrowRight.gif', 16, 16);
          sliderDecoMinute.useInputField = 0;
          sliderDecoMinute.styleValueFieldClass = 'sliderInput';
          sliderDecoMinute.colorbar = new Object();
          sliderDecoMinute.colorbar['color']           = '#FF00FF'; //'magenta';
          sliderDecoMinute.colorbar['color2']          = '#000000';
          sliderDecoMinute.colorbar['height']          = 5;
          sliderDecoMinute.colorbar['widthDifference'] = -12;
          sliderDecoMinute.colorbar['offsetLeft']      = 5;
          sliderDecoMinute.colorbar['offsetTop']       = 9;
          sliderDecoMinute.drawInto('sliderDecoMinute');
      }
      function sliderDecoMinuteChange(sliderObj, val, newPos){ 
	      showMain(getFile(decoMinuteData, 'Decollage_minute', nbDecoMinutes-val, 0)['url']);      
      }
      
      //
      // panoramik scrolling
      //
      function scrollPano(x){
         document.getElementById('panoscrollDiv').style.visibility='visible';
         var margin=pano.bannerTileWidth/2*viewer.width/pano.tileWidth;
         if(x<margin){
         	x+=pano.bannerTileWidth*(pano.nbTiles-1);
            //document.getElementById('leftarrow').style.visibility='hidden';
         }else{
            //document.getElementById('leftarrow').style.visibility='visible';
         }
         if(x>(pano.bannerWidth-margin)){
         	x-=pano.bannerTileWidth*(pano.nbTiles-1);
            //x=pano.bannerWidth-margin-1;
            //document.getElementById('rightarrow').style.visibility='hidden';
         }else{
            //document.getElementById('rightarrow').style.visibility='visible';
         }
         if(x==pano.scrollX){
           return true;
         }
         pano.scrollX=x;

         document.getElementById('panoscrollDiv').style.width=viewer.width;
         for(i=0; i<9; i++){
            div=document.getElementById('panoscrollSub'+i);
            shift=(i-(x/pano.bannerTileWidth))*pano.tileWidth+viewer.width/2;
            div.style.left=shift;
         }
         return true;
      }

      var isShiftingPano=false;
      function shiftPano(dir, init){
         if(init != null)
           isShiftingPano=init;
         if(!isShiftingPano){
           return false;
         }
         if(scrollPano(pano.scrollX+dir)){
           if(Math.abs(dir)<20){
              dir=1.15*dir;
           }
           window.setTimeout("shiftPano("+dir+")",50);
         }
         
      }

      function stopShiftPano(){
         isShiftingPano=false;
      }
      
      function checkHidePanoscrollDiv(event, obj){
      	var div=document.getElementById('panoscrollDiv');
      	var webcamdiv=document.getElementById('webcamDiv');
      	
      	x=event.clientX-div.offsetLeft;
      	y=event.clientY-div.offsetTop-webcamdiv.offsetTop;
      	var div2=document.getElementById('panobannerDiv');
      	x2=event.clientX-div2.offsetLeft;
      	y2=event.clientY-div2.offsetTop-webcamdiv.offsetTop;
      	
      	if(!((x>=0 && x<div.offsetWidth && y>=0 && y<div.offsetHeight) || (x2>=0 && x2<div2.offsetWidth && y2>=0 && y2<div2.offsetHeight))){
			setVisibilityPanoscrollDiv(false);
      	} 
      }
      function setVisibilityPanoscrollDiv(b){
          var vis=b?'visible':'hidden';
          document.getElementById('panoscrollDiv').style.visibility=vis;
          document.getElementById('leftarrow').style.visibility=vis;
          document.getElementById('rightarrow').style.visibility=vis;
      }
      
    </script>
<h1>La webcam du Salève - la Table d'Orientation</h1>
<p />
<table border=0 cellspacing=0 cellpadding=0>
	<tbody>
		<tr>
			<td id='sliderDecoMinute' height=30>
			</td>
		</tr>
		<tr>
			<td>
			<div id='webcamDiv' style='position: relative'>
			<div style='position:relative; overflow:hidden'>
			<div id='mainImageDiv'
				style='position:absolute; top:0; left:0 ; z-index:1; width:704'>
			<img id='mainImage'></img></div>
			<div id='Decollage_minuteDiv'
				style='position:absolute; top:0; left:0 ; z-index:10; height: 576; width:704'>
			<img id='enlargedImage'></img></div>
			<div id='panoscrollDiv'
				onmouseout='checkHidePanoscrollDiv(event, this)'
				style='visible:hidden; position:relative; overflow:hidden; left:0 ; z-index:20; height: 576; width:704'>
			<div id='leftarrow'
				style='position:absolute; z-index:10; opacity:0.6 ; top:350; left:0'>
			<img src='images/panoarrow-left.png'
				onmousedown='shiftPano(-1, true)' onmouseup='stopShiftPano()'
				onmouseout='stopShiftPano()'></img></div>
			<div id='rightarrow'
				style='position:absolute; z-index:10; opacity:0.6 ; top:350; left:654'>
			<img src='images/panoarrow-right.png'
				onmousedown='shiftPano(+1, true)' onmouseup='stopShiftPano()'
				onmouseout='stopShiftPano()'></img></div>
			</div>
			</div>
			<div id='thumbnailscol'
				style='position:absolute; top:12 ;left:702; z-index:1; height: 576'>
			</div>
			</div>
			<div id='panobannerDiv'
				style='position:relative; top:0 ;left:0; z-index:1; width:704'>
			<img id='panobanner' onmouseout='checkHidePanoscrollDiv(event, this)'
				onmouseover='setVisibilityPanoscrollDiv(true)'
				onmousemove='scrollPano(event.clientX-this.offsetLeft)'></img><!--  onmouseover='file2main(panoData, \"pano"+i+"\", 0)' onmouseout='setDefaultImage()'></img>-->
			</div>
			</td>
		</tr>
	</tbody>
</table>


pouet coinc
<p /><!-- 
    <textarea id="tadebug" cols=80 rows=30>
    </textarea>
    -->
</body>
</htmloionc